<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html >
<html>
<head>
    <base href="${base}/"/>
    <title>后台管理</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/admin.css"/>
    <style>
        /* 新增的全局样式 */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden; /* 防止默认滚动条 */
        }

        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        #header {
            flex-shrink: 0;
        }

        #main-content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        #admin_left {
            flex-shrink: 0;
            overflow-y: auto;
        }

        #admin_right {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }

        /* 按钮样式 */
        .btn_add {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn_add:hover {
            background-color: #218838;
        }

        /* 表单按钮样式 */
        .submit {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }

        .cancel {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            margin-left: 10px;
        }
        /* 用户列表样式 */
        .search_form {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }

        .list_table {
            width: 100%;
            overflow-x: auto;
        }

        .list_table table {
            width: 100%;
            border-collapse: collapse;
        }

        .list_table th, .list_table td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }

        .list_table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        .list_table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .list_table tr:hover {
            background-color: #f1f1f1;
        }

        /* 状态样式 */
        .status_normal {
            color: #28a745;
            font-weight: bold;
        }

        .status_frozen {
            color: #ffc107;
            font-weight: bold;
        }

        .status_blacklist {
            color: #dc3545;
            font-weight: bold;
        }

        /* 按钮样式 */
        .btn_freeze, .btn_unfreeze, .btn_blacklist, .btn_remove_blacklist, .btn_delete {
            display: inline-block;
            padding: 5px 10px;
            margin: 0 3px;
            border-radius: 3px;
            text-decoration: none;
            font-size: 12px;
        }

        .btn_freeze {
            background-color: #ffc107;
            color: #000;
        }

        .btn_unfreeze {
            background-color: #28a745;
            color: #fff;
        }

        .btn_blacklist {
            background-color: #dc3545;
            color: #fff;
        }

        .btn_remove_blacklist {
            background-color: #17a2b8;
            color: #fff;
        }

        .btn_delete {
            background-color: #6c757d;
            color: #fff;
        }

        /* 分页样式 */
        .pagination {
            margin-top: 20px;
            text-align: center;
        }

        .pagination a, .pagination span {
            display: inline-block;
            padding: 8px 12px;
            margin: 0 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
            text-decoration: none;
            color: #333;
        }
        .rrr {
            width: 100%;
            display: flex; /* 使用弹性布局 */
            justify-content: space-between; /* 子元素两端对齐 */
            align-items: center; /* 垂直居中 */
        }
        .pagination a:hover {
            background-color: #f1f1f1;
        }

        .pagination .page_current {
            background-color: #007bff;
            color: #fff;
            border-color: #007bff;
        }
    </style>
    <script type="text/javascript">
        function handleAdminAccountChange(event) {
            if (event.keyCode === 13) { // Enter key
                const input = event.target;
                const newAccount = input.value.trim();
                const adminId = input.dataset.id;

                if (newAccount === input.defaultValue) return; // 未修改

                fetch('/admin/manager/updateAccount', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        id: adminId,
                        account: newAccount
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            input.defaultValue = newAccount; // 更新默认值
                            showToast('success', '用户名修改成功');
                        } else {
                            showToast('error', data.message || '修改失败');
                            input.value = input.defaultValue; // 恢复原值
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showToast('error', '网络请求失败');
                        input.value = input.defaultValue;
                    });
            }
        }

        // 简单的Toast提示函数（需页面有对应的HTML结构）
        function showToast(type, message) {
            const toast = document.createElement('div');
            toast.className = `toast toast-${type}`;
            toast.textContent = message;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        }

        function toggleAddAdminForm() {
            var form = document.getElementById('addAdminForm');
            if (form.style.display === 'none') {
                form.style.display = 'block';
            } else {
                form.style.display = 'none';
            }
        }


        // 冻结用户
        function freezeUser(userId) {
            if (confirm('确定要冻结该用户吗？')) {
                window.location.href = '/admin/user/freeze?id=' + userId;
            }
        }



        // 解冻用户
        function unfreezeUser(userId) {
            if (confirm('确定要解冻该用户吗？')) {
                window.location.href = '/admin/user/unfreeze?id=' + userId;
            }
        }

        // 加入黑名单
        function addToBlacklist(userId) {
            if (confirm('确定要将该用户加入黑名单吗？')) {
                window.location.href = '/admin/user/blacklist/add?id=' + userId;
            }
        }

        // 移除黑名单
        function removeFromBlacklist(userId) {
            if (confirm('确定要将该用户从黑名单中移除吗？')) {
                window.location.href = '/admin/user/blacklist/remove?id=' + userId;
            }
        }

        // 删除用户
        function deleteUser(userId) {
            if (confirm('确定要删除该用户吗？此操作不可恢复！')) {
                window.location.href = '/admin/user/delete?id=' + userId;
            }
        }
        // 删除管理员
        function deleteAdmin(adminId) {
            if (confirm('确定要删除该用户吗？此操作不可恢复！')) {
                window.location.href = '/admin/manager/delete?id=' + adminId;
            }
        }
    </script>
</head>
<body>
<div class="container">
    <div id="header">
        <div class="logo">
            <a href=""><img src="images/admin/logo.png" width="303" height="43" /></a>
        </div>
        <p>
            <a href="/admin/logout">退出管理</a> <a href="/admin">后台首页</a> <a href="/" target='_blank'>商城首页</a>
            <span>您好 <label class='bold'>${sessionScope.manager.account}</label></span>
        </p>
    </div>

    <div id="main-content">
        <div id="admin_left">
            <ul class="submenu">
                <ul class="menu">
                    <li><a href="admin/category/add">增加类别</a></li>
                    <li><a href="admin/category/list">类别列表</a></li>
                    <li><a href="admin/goods/add">增加商品</a></li>
                    <li><a href="admin/user/list">用户列表</a></li>
                </ul>
            </ul>
            <div id="copyright"></div>
        </div>

        <div id="admin_right">
            <div class="content_box">
                <!-- 用户列表 -->
                <div class="content">
                    <div class="title">
                        <h2>用户列表</h2>
                    </div>

                    <!-- 搜索表单 -->
                    <div class="search_form">
                        <form action="/admin/user/list" method="get">
                            <table class="form_table" cellpadding="0" cellspacing="0">
                                <tr>
                                    <th>账号：</th>
                                    <td><input class="normal" name="account" type="text" value="${param.account}"></td>
                                    <th>邮箱：</th>
                                    <td><input class="normal" name="email" type="text" value="${param.email}"></td>
                                    <th>电话：</th>
                                    <td><input class="normal" name="telphone" type="text" value="${param.telphone}"></td>
                                    <td>
                                        <button class="submit" type="submit">
                                            <span>搜索</span>
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>

                    <!-- 用户列表表格 -->
                    <div class="list_table">
                        <table cellpadding="0" cellspacing="0">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>账号</th>
                                <th>邮箱</th>
                                <th>电话</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${userList}" var="user">
                                <tr>
                                    <td>${user.id}</td>
                                    <td>${user.account}</td>
                                    <td>${user.email}</td>
                                    <td>${user.telphone}</td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${user.status == 1}">
                                                <span class="status_normal">正常</span>
                                            </c:when>
                                            <c:when test="${user.status == 0}">
                                                <span class="status_frozen">已冻结</span>
                                            </c:when>
                                            <c:otherwise>
                                                <span class="status_blacklist">黑名单</span>
                                            </c:otherwise>
                                        </c:choose>
                                    </td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${user.status == 1 || user.status == 2}">
                                                <a href="javascript:void(0);" onclick="freezeUser(${user.id})" class="btn_freeze">冻结</a>
                                            </c:when>
                                            <c:otherwise>
                                                <a href="javascript:void(0);" onclick="unfreezeUser(${user.id})" class="btn_unfreeze">解冻</a>
                                            </c:otherwise>
                                        </c:choose>

                                        <c:choose>
                                            <c:when test="${user.status != 2}">
                                                <a href="javascript:void(0);" onclick="addToBlacklist(${user.id})" class="btn_freeze">加入黑名单</a>
                                            </c:when>
                                            <c:otherwise>
                                                <a href="javascript:void(0);" onclick="removeFromBlacklist(${user.id})" class="btn_unfreeze">移出黑名单</a>
                                            </c:otherwise>
                                        </c:choose>

                                        <a href="javascript:void(0);" onclick="deleteUser(${user.id})" class="btn_delete">删除</a>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="pagination">
                        <c:forEach begin="1" end="${totalPages}" var="page">
                            <a href="/admin/user/list?page=${page}" class="pagination-item ${currentPage == page ? 'active' : ''} ">${page}</a>
                        </c:forEach>
                    </div>
                </div>
                <div class="content">

                    <div class="title">
                        <span class="rrr">
                        <h2>管理员列表</h2>
                        <button class="btn_add" onclick="toggleAddAdminForm()">创建管理员</button>
                        </span>

                    </div>
                    <c:if test="${not empty message}">
                        <div class="alert alert-success">${message}</div>
                    </c:if>
                    <c:if test="${not empty error}">
                        <div class="alert alert-danger">${error}</div>
                    </c:if>
                    <!-- 添加管理员表单 (默认隐藏) -->
                    <div id="addAdminForm" style="display: none; margin-bottom: 20px; padding: 15px; background-color: #f9f9f9; border-radius: 5px;">
                        <form action="/admin/manager/add" method="post">
                            <table class="form_table" cellpadding="0" cellspacing="0">
                                <col width="150px"/>
                                <col/>
                                <tr>
                                    <th>账号：</th>
                                    <td><input class="normal" name="account" type="text" required></td>
                                </tr>
                                <tr>
                                    <th>密码：</th>
                                    <td><input class="normal" name="password" type="password" required></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <button class="submit" type="submit">提交</button>
                                        <button class="cancel" type="button" onclick="document.getElementById('addAdminForm').style.display='none'">取消</button>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="list_table">
                        <table cellpadding="0" cellspacing="0">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>账号</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${adminList}" var="admin">
                                <tr>
                                    <td>${admin.id}</td>
                                    <td>
                                        <input type="text"
                                               class="admin-account"
                                               value="${admin.account}"
                                               data-id="${admin.id}"
                                               onkeypress="handleAdminAccountChange(event)">
                                    </td>
                                    <td>
                                        <a href="javascript:void(0);" onclick="deleteAdmin(${admin.id})" class="btn_delete">删除</a>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>